<template>
    <div class="index">
        <div class="top-div">
            <img class="bg-img" src="../assets/img/i-bg.png" alt="">
            <div v-if="activeDetail.status===0" class="i-div my-active">
                <div class="look-btn" @click="myActivity(1)">生成我的海报</div>
                <div v-if="!activeDetail.mySelf" class="look-btn look-active" @click="myActivity">查看我的活动</div>
                <div class="active-desc" @click="showRule=true">活动玩法说明</div>
            </div>
            <div v-if="activeDetail.status===1" class="i-div just-one">
                <div class="">
                    <p>您已为好友助力</p>
                </div>
                <div v-if="!activeDetail.mySelf" class="look-btn" @click="myActivity">查看我的活动</div>
            </div>
            <div v-if="activeDetail.status===3" class="i-div get-pricse">
                <div class="">
                    <p>您已填写获奖信息，</p>
                    <p>我们的工作人员将会与您联系</p>
                </div>
            </div>
            <div v-if="activeDetail.status===2" class="i-div fill-text">
                <div class="form-title">
                    你已获得礼品，请填写资料作领奖凭证
                </div>
                <div class="form">
                    <div class="input-div">
                        <input type="text" placeholder="请留下学生的真实姓名" v-model="form.prizeUser">
                    </div>
                    <div class="input-div grade" @click="showGrade=!showGrade">
                        <span>{{form.grade||'年级'}}</span>
                        <img src="../assets/img/down.png" alt="">
                        <ul v-show="showGrade">
                            <li @click.stop="form.grade='三年级';showGrade=false;">三年级</li>
                            <li @click.stop="form.grade='四年级';showGrade=false;">四年级</li>
                            <li @click.stop="form.grade='五年级';showGrade=false;">五年级</li>
                            <li @click.stop="form.grade='六年级';showGrade=false;">六年级</li>
                        </ul>
                    </div>
                    <!--<div class="input-div grade school" @click="showSchool=!showSchool">
                        <span>{{form.school||'请选择意向领取校区'}}</span>
                        <img src="../assets/img/down.png" alt="">
                        <ul v-show="showSchool">
                            <li v-for="school in schools" @click.stop="form.school=school;showSchool=false;">{{school}}</li>
                        </ul>
                    </div>-->
                    <div class="input-div">
                        <input type="text" placeholder="请填手机号，专人联系兑奖" v-model="form.phone">
                    </div>
                    <div class="img-code">
                        <div class="in-div">
                            <input type="text" v-model="code">
                        </div>
                        <div class="code-div" @click="generCaptcha">
                            <img v-if="imgCode.img" :src="'data:image/png;base64,'+imgCode.img" alt="">
                        </div>
                    </div>
                    <div class="phone-code">
                        <div class="in-div">
                            <input type="text" v-model="form.code">
                        </div>
                        <div v-if="!showDao" class="code-div" @click="sendLoginSms">
                            <span>发送验证码</span>
                        </div>
                        <div v-else class="code-div">
                            <span>({{times}}秒)重新发送</span>
                        </div>
                    </div>
                    <div>
                        <span>*领取地址：惠城区江北文昌二路2-13尚学教育（碧水湾北门）</span>
                    </div>
                </div>
                <div class="btn-div">
                    <div class="sure" @click="prize">确认</div>
                </div>
            </div>
        </div>
        <div class="i-bottom">
            <div class="i-title">
                <div class="line"></div>
                <div class="point"></div>
                <div class="text">邀请5人可免费获得知识图谱</div>
                <div class="point"></div>
                <div class="line"></div>
            </div>
            <div class="head-list">
                <div class="first">
                    <div class="active">
                        <img :src="activeDetail.srsUserHeadImg" alt="">
                    </div>
                    <div>发起人</div>
                </div>
                <div class="list-div">
                    <div class="line1" v-if="activeDetail.helpHeadImgList">
                        <div :class="{active:activeDetail.helpHeadImgList[0]}">
                            <img :src="activeDetail.helpHeadImgList[0]||defaultHead" alt="">
                        </div>
                        <div :class="{active:activeDetail.helpHeadImgList[1]}">
                            <img :src="activeDetail.helpHeadImgList[1]||defaultHead" alt="">
                        </div>
                        <div :class="{active:activeDetail.helpHeadImgList[2]}">
                            <img :src="activeDetail.helpHeadImgList[2]||defaultHead" alt="">
                        </div>
                        <div :class="{active:activeDetail.helpHeadImgList[3]}">
                            <img :src="activeDetail.helpHeadImgList[3]||defaultHead" alt="">
                        </div>
                        <div :class="{active:activeDetail.helpHeadImgList[4]}">
                            <img :src="activeDetail.helpHeadImgList[4]||defaultHead" alt="">
                        </div>
                    </div>
                    <div class="line2">
                        <div class="sheng" :class="{active:activeDetail.helpHeadImgList.length>5}">
                            <span>...</span>
                        </div>
                        <div class="all">
                            共
                            <em>{{activeDetail.helpHeadImgTotal||0}}</em>位好友助力
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div v-show="showRule" class="mask" @click="showRule=false"></div>
        <div v-show="showRule" class="rule">
            <div class="rule-title">
                活动规则
            </div>
            <!--<div class="a-label">
                高一月考突破装备 ：
            </div>
            <div class="a-text">
                《高一月考真题集》1本 +月考专题课 1讲
            </div>-->
                <div class="a-label">
                    活动玩法 ：
                </div>
                <div class="a-text">
                    <p>1、点击<em>“生成我的海报”</em>，生成专属海报</p>
                    <p>2、<em>长按保存</em>个人海报，并<em>转发分享</em></p>
                    <p>3、满<em>5位</em>好友助力即可获得《小学语数英知识图谱》一份，准确填写个人资料，3-5个工作日内将有专人通知</p>
                    <p>4、点击<em>“查看我的活动”</em>，了解助力进度</p>
                </div>
            <div class="a-label">
                活动时间 ：
            </div>
            <div class="a-text">
                2018/11/09 ~ 2018/11/19
            </div>
            <div class="a-label">
                温馨提醒 ：
            </div>
            <div class="a-text">
                个人海报转发朋友圈、好友群聊、好友私聊，可以更快完成助力哟
            </div>
            <div class="desc">
                <div class="d-line"></div>
                <div class="d-text">誉优品学尚学教育对本次活动拥有最终解释权</div>
                <div class="d-line"></div>
            </div>
            <div class="sure" @click="myActivity(1);showRule=false">生成我的海报</div>
        </div>
    </div>
</template>
<script>
import io from 'api/io'
import defaultHead from '../assets/img/default.png'
import wxConfig from 'api/wx'
import conf from 'api/conf'
export default {
    name: 'index',
    data() {
        return {
            defaultHead,
            showRule: false,
            srsActivityId: this.$route.query.srsActivityId,
            openId: localStorage.getItem('openId'),
            headImg: localStorage.getItem('headImgUrl'),
            nickName: localStorage.getItem('nickName'),
            activeDetail: {
                helpHeadImgList: [],
                status: 0,
                srsUserHeadImg: decodeURIComponent(localStorage.getItem('headImgUrl'))
            },
            form: {
                prizeUser: '',
                grade: '',
                school:'尚学教育',
                phone: '',
                code: '',
            },
            code: '',
            imgCode: {},
            times: 60,
            showDao: false,
            inter: '',
            showGrade:false,
            showSchool:false,
            schools:['三水成业汇景校区','三水永安广场校区']
        }
    },
    beforeRouteUpdate(to, from, next){
        console.log(to)
        this.srsActivityId=to.query.srsActivityId
        this.init()
        next()
    },
    created() {
        this.init()
    },
    mounted () {
         wxConfig()
         this.initWx()
    },
    destroyed () {
        clearInterval(this.inter)
    },
    methods: {
        init() {
            if (this.srsActivityId) {
                this.getActive()
            }
        },
        async getActive() {
            let { data } = await io.post(io.home, { openId: this.openId, srsActivityId: this.srsActivityId, headImg: this.headImg,name:this.nickName })
            if (data.success) {
                this.activeDetail = data.data
                this.showRule=!data.data.hasActivity
                if (data.data && data.data.status === 2) {
                    this.generCaptcha()
                }
            }
        },
        async myActivity(type) {
            let { data } = await io.post(io.myActivity, { openId: this.openId,headImg:this.headImg,name:this.nickName })
            if (data.success) {
                if(type===1){
                this.$router.push({ path: '/share', query: { srsActivityId: data.data } })
                }else{
                this.$router.push({ path: '/', query: { srsActivityId: data.data } })
                }
            }
        },
        async generCaptcha() {
            let { data } = await io.post(io.generCaptcha)
            if (data.success) {
                this.imgCode = data.data
            }
        },
        async sendLoginSms() {
            console.log(this.form)
            let myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
            if (!myreg.test(this.form.phone)) {
                this.$dialog.alert('请输入正确的手机号', { okText: '确定' })
                return
            }
            if (!this.code) {
                this.$dialog.alert('请输入图片验证码', { okText: '确定' })
                return
            }
            let { data } = await io.post(io.sendLoginSms, { phone: this.form.phone, captcha: this.code, token: this.imgCode.token })
            if (data.success) {
                this.$dialog.alert('发送成功', { okText: '确定' })
                this.showDao = true
                this.inter = setInterval(() => {
                    if (this.times) {
                        this.times--
                    } else {
                        this.showDao = false
                        this.times = 60
                        clearInterval(this.inter)
                    }
                }, 1000)
            }else{
                this.$dialog.alert(data.desc, { okText: '确定' })
            }
        },
        async prize() {
            if (this.form.prizeUser.length < 2 || this.form.prizeUser.length > 20) {
                this.$dialog.alert('请输入正确名称，长度2～20个字', { okText: '确定' })
                return
            }
            if (!this.form.grade) {
                this.$dialog.alert('请输入年级', { okText: '确定' })
                return
            }
            if (!this.form.school) {
                this.$dialog.alert('请选择意向领取校区', { okText: '确定' })
                return
            }
            let myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
            if (!myreg.test(this.form.phone)) {
                this.$dialog.alert('请输入正确的手机号', { okText: '确定' })
                return
            }
            if (!this.form.code) {
                this.$dialog.alert('请输入手机验证码', { okText: '确定' })
                return
            }
            let { data } = await io.post(io.prize, { ...this.form, openId: this.openId })
            if (data.success) {
                this.init()
            } else {
                this.$dialog.alert(data.desc, { okText: '确定' })
            }
        },
    initWx() {
      wx.ready(() => {
        let title = '我在帮孩子领取小学语数英知识图谱活动，快来助我一臂之力！'
        let link = conf.basePath + '/#/?srsActivityId=' + this.srsActivityId
        console.log('xxxx', link)
        wx.onMenuShareTimeline({
          title: title, // 分享标题  
          link: link, // 分享链接,将当前登录用户转为puid,以便于发展下线  
          imgUrl: 'http://h5.game.yuyou100.com/srs/static/share.jpeg', // 分享图标  
          success: () => {
            // 用户确认分享后执行的回调函数 
            // this.$dialog.alert('分享成功', { okText: '确定' })
          },
          cancel: function() {
            // 用户取消分享后执行的回调函数  
          }
        });
        wx.onMenuShareAppMessage({
          title: title, // 分享标题  
          desc: '亲们帮帮忙，点击一下，我想帮孩子领小学语数英知识图谱~', // 分享描述  
          link: link, // 分享链接  
          imgUrl: 'http://h5.game.yuyou100.com/srs/static/share.jpeg', // 分享图标  
          type: '', // 分享类型,music、video或link，不填默认为link  
          dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空  
          success: () => {
            // 用户确认分享后执行的回调函数  
            // this.$dialog.alert('分享成功', { okText: '确定' })
          },
          cancel: function() {
            // 用户取消分享后执行的回调函数  
          }
        });
      })
    }
    }
}
</script>
<style lang="stylus" scoped>
.index
    min-height 100%
    position relative
    background #ecf1f4
.top-div
    position relative
.bg-img
    width 100%
    height auto
.i-div
    position absolute
    font-size 18px
    color white
    top 0
    p
        margin 5px
.just-one,.get-pricse
    top 50px
    text-align center
    width 100%
.fill-text
    bottom 0px
    margin 0 20px
    border-top-left-radius 20px
    border-top-right-radius 20px
    background-image linear-gradient(0deg,#eae8e5 0%,rgba(255,255,255,.9) 100%)
    color #333
    font-size 14px
    padding 25px 35px
    margin-top 50px
    @media screen and (min-width:320px) and (max-width:374px){
        padding 5px 20px
        margin-top 40px
    }
    @media screen and (min-width:414px) and (max-width:900px){
    }
    .form
        width 100%
        margin 10px 0 0px 0
        .input-div
            border 1px solid #78a2ce
            height 38px
            display flex
            align-items center
            border-radius 5px
            background white
            padding 0 5px
            margin-top 10px
        .grade
            position relative
            img 
                height 10px
                position absolute
                right 10px
            ul
                position absolute
                bottom -106px
                max-height 200px
                overflow auto
                left -1px
                margin 0
                padding 0
                background white
                width 100%
                border 1px solid #78a2ce
                border-bottom-left-radius 5px
                border-bottom-right-radius 5px
                z-index 111
                li
                    list-style none
                    height 36px
                    display flex
                    align-items center
                    padding-left 10px
                    &:hover
                        background #78a2ce
        .school
            ul
                bottom -72px
        input 
            width 100%
            outline none
            font-size 14px
            height 20px
            border 0
        .img-code,.phone-code
            margin-top 10px
            display flex
            .code-div
                width 100px
                height 36px
                border 1px solid #78a2ce
                border-top-right-radius 5px
                border-bottom-right-radius 5px
                display flex
                background white
                justify-content center
                align-items center
                color #999
            .in-div
                border 1px solid #78a2ce
                border-top-left-radius 5px
                border-bottom-left-radius 5px
                margin-right 2px
                height 38px
                background white
                display flex
                align-items center
                padding 0 5px
                flex 1
            input 
                flex 1
                height 20px
            .code-div
                width 100px
                height 38px
                overflow hidden
                background #ddd
                img 
                    width 180px
                    position relative
                    left -10px
        .phone-code
            .code-div
                background white
    .btn-div
        display flex
        div
            flex 1
        .sure,.after
            display flex
            height 40px
            align-items center
            justify-content center
            background-image linear-gradient(0deg,#ff9600 0%,#ffcc00 100%)
            box-shadow 2px 3px 6px 0px rgba(0,0,0,0.3)
            border-radius 20px
            font-size 18px
        .after
            background-image linear-gradient(0deg,#488ad3 0%,#60abff 100%)
            margin-right 0
.my-active
    top 50px
    left 0
    width 100%
.look-btn
    width 70%
    height 40px
    background-image linear-gradient(180deg,#fdeb49 0%,#ffb400 100%)
    border-radius 20px
    display flex
    align-items center
    justify-content center
    color #444
    font-size 20px
    margin-left 15%
.look-active
    background-image linear-gradient(180deg,#70edff  0%, #00a9c2 100%)
    margin-top 10px
.active-desc
    display flex
    align-items center
    justify-content center
    width 40%
    height 30px
    background #105ba6
    border-radius 20px
    color white
    font-size 17px
    margin-left 30%
    margin-top 20px
.i-bottom
    position relative
    top -6px
.i-title
    height 40px
    width 100%
    padding 10px 
    display flex
    align-items center
    background #ecebe7
    box-sizing border-box
    .line
        flex 1
        height 0
        border-bottom 1px solid #003065
    .point
        width 5px
        height 5px
        border-radius 5px
        background #003065
    .text
        margin 0 10px
        font-size 16px
        color #003065
.head-list
    display flex
    background #ecf1f4
    padding 15px 5px 15px 5px
    box-sizing border-box
    img 
        width 35px
        height 35px
        border-radius 50%
        border 2px solid rgba(210,219,224,.8)
        display inline-block
    .active img 
        border-color rgba(227,144,14,.8)
    .first
        width 90px
        text-align center
        padding-top 10px
        box-sizing border-box
    .head-list
        flex 1
    .list-div
        flex 1
        .line1
            display flex
            div
                margin 0 5px
                flex 1
                align-items center
                justify-content center
        .line2
            display flex
            margin-top 10px
            .sheng 
                margin-left 5px
                width 35px
                height 35px
                display flex
                justify-content center
                align-items center
                border 2px solid rgba(210,219,224,.8)
                display inline-block
                border-radius 50%
                text-align center
                color rgba(210,219,224,.8)
                font-size 30px
                line-height 20px
                &.active
                    border-color rgba(227,144,14,0.8)
                    color rgba(227,144,14,0.8)
            .all
                font-size 16px
                color #003065
                margin-left 10px
                line-height 35px
                em
                    font-size 20px
                    color #ff0000
                    margin 0 5px

.mask
    height: 100%;
    position: fixed;
    width: 100%;
    top: 0;
    background: black;
    opacity: .4;
.rule
    background white
    width 90%
    position fixed
    left 5%
    top 40px
    border-radius 15px
    padding 10px 10px 20px
    box-sizing border-box
    p
        margin 0
    .r-div
        margin-top 20px
    .rule-title
        width 70%
        position relative
        height 40px
        display flex
        justify-content center
        align-items center
        background #ffcc00
        box-shadow 2px 3px 10px 0px rgba(70,41,0,0.43)
        border-bottom-right-radius 10px
        border-bottom-left-radius 10px
        font-size 18px
        margin-left 15%
        top -15px
        &:before
            content ''
            width 0
            height 0
            border-bottom 5px solid #a56400
            border-left 5px solid transparent
            position absolute
            top 0
            left -5px
        &:after
            content ''
            width 0
            height 0
            border-bottom 5px solid #a56400
            border-right 5px solid transparent
            position absolute
            top 0
            right -5px
    .a-label
        font-size 14px
    .a-text
        font-size 14px
        margin-bottom 10px
        em
            font-weight bold
            color red
            font-style normal
.desc
    display flex
    align-items center
    .d-text
        font-size 12px
        margin 0 5px
        color #999
    .d-line
        height 0
        flex 1
        display flex
        border-bottom 1px solid #999999
.sure
    width 60%
    height 40px
    color white
    background-image linear-gradient(180deg,#2b73c3 0%,#4a8bd3 100%)
    border-radius 20px
    display flex
    justify-content center
    align-items center
    margin auto
    margin-top 10px
</style>

